<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/login.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
<!-- 1.头部 -->
<div id="header">
    <!-- 1.顶部登录注册 -->
    <div class="top bgc10">
        <!-- 版心 -->
        <div class="container ce6 ti265">
            why.com
            <div class="fr">
                欢迎光临<a href="#" class="cf60">WHY</a>，请<a href="./login.html" class="ce6">登陆</a>\<a href="./register.html" class="cf60">注册</a>
            </div>
        </div>
    </div>
    <!-- 2.登录logo -->
    <div class="loginlogo container rel">
        <div class="logo abs">
            <!-- 1.logo -->
            <a href="#">
                <img src="./images/素材图片/饰品/why.jpg" alt="" class=" abs">
            </a>
            <span class="abs font30 ce6">登录</span>
        </div>
        <h3 class="font30 fnormal c6">欢迎登录</h3>
    </div>
</div>

<!-- 登录表单 -->
<div id="app" class="container">
    <!-- <img src="./images/bannera.jpg" alt=""> -->
    <div id="loginForm">
        <div id="loginBox">
            <span class="tip1 font22 c6">账号</span><input type="tel" id="gettel" name="utele" class="login font16"
                                                         placeholder="请输入账号（手机号码）">
            <span class="tip2 font22 c6">密码</span><input type="password" id="getpwd" name="upassword" class="login font16"
                                                         placeholder="请输入密码">
            <a href="./modify.html">记密码？</a>
            <button type="button" @click="login" class="logBtn font26">登录</button>
            <div id="err" class="" style="visibility: hidden">账号或密码错误</div>
        </div>
    </div>
</div>

<!-- 10.页脚 -->
<div id="footer">
    <div class="container">

        <p class="btmnav">
            <a href="#" class="font12 c3">公司简介</a>
            |
            <a href="#" class="font12 c3">Investor Relations</a>
            |
            <a href="#" class="font12 c3">网站联盟</a>
            |
            <a href="#" class="font12 c3">投资热线--05168888661</a>
            |
            <a href="#" class="font12 c3">机构销售</a>
            |
            <a href="#" class="font12 c3">欢迎加盟</a>
            |
            <a href="#" class="font12 c3">官方Blog</a>
            |
            <a href="#" class="font12 c3">热词搜索</a>
        </p>
        <p class="font12 c3">why首饰购物网@hmh.yfg.wy.888</p>
    </div>
</div>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                info:null
            }
        },
        methods:{
            login:function () {
                console.log("aaa");
                $.post("/user/login",
                    {utele: $("#gettel").val(),
                        upassword: $("#getpwd").val()},
                    function (data) {
                    this.info = data;
                    if (data == "err") {
                        $("#err").css("visibility", "visible");
                    } else if (data == "ok") {
                        window.location.href = "/index.html";
                    }
                })
            }
        }
    })
</script>

</body>

</html>
